﻿@{
    ViewBag.Title = "showRole";
    Layout = "~/Views/Shared/ShouYe.cshtml";
}

<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/js/jquery.min.js"></script>
<script src="~/Scripts/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<div class="col-lg-12">
    <div class="col-lg-6">
        <button class="btn btn-warning " data-toggle="modal" data-target="#myModal" style="margin-left:10%" onclick="tianjia()">
            添加新角色
        </button>
        <table class="tab-content table table-bordered table-striped table-responsive" style="margin-left:45%;margin-top:10px;">
            <tr>
                <td colspan="3"><h3>角色信息操作</h3></td>
            </tr>
            <tr>
                <td>角色编号</td>
                <td>角色名称</td>
                <td>操作</td>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.RoleId</td>
                    <td>@item.RoleName</td>
                    <td>
                        <input class="btn-danger" id="Button1" type="button" onclick="shanchu('@item.RoleId')" value="删除" />
                        <button class=" btn-primary " data-toggle="modal" data-target="#myModal" onclick="fantian('@item.RoleId')">
                            修改
                        </button>

                    </td>
                </tr>
            }

        </table>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dissmiss="modal" aria-hidden="true">
                        X
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改角色信息
                    </h4>
                </div>
                <div class="modal-body" style="margin-right:45%">
                    <table class="tab-content table table-bordered table-striped table-responsive" style="margin-left:45%;margin-top:10px;">
                        <thead>
                            <tr>
                                <td colspan="3"><h3>角色信息操作</h3></td>
                            </tr>
                        </thead>
                        <tbody id="tbody"></tbody>

                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="jueseadd()">
                        添加角色
                    </button>
                    <button type="button" class="btn btn-primary" onclick="tijiao()">
                        提交更改
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    //模态框显示
    function fantian(RoleId)
    {
        $.ajax({
            url: "/Home/showRoleid",
            type: "post",
            data: { roleid: RoleId },
            success: function (obj) {
                if (obj.length > 0) {
                    $("#tbody").empty();
                    var str = "";
                    str += "<tr><td>角色编号：</td><td><input id=\"roleid\" type=\"text\" value=" + obj[0].RoleId + " readonly=\"readonly\" /></td></tr>";
                    str += "<tr><td>角色名称：</td><td><input id=\"rolename\" type=\"text\" value=" + obj[0].RoleName + " /></td></tr>";
                    $("#tbody").append(str);
                }
                else {
                    alert("该角色不存在，请刷新数据。")
                    location.href = "/Home/showRole";
                }
            }
        })
    }
    //修改角色
    function tijiao()
    {
        var roleid = $("#roleid").val();
        var rolename = $("#rolename").val();
        $.ajax({
            url: "/Home/updRole",
            type: "post",
            data: { roleid: roleid, rolename: rolename },
            success: function (obj)
            {
                if (obj > 0) {
                    location.href = "/Home/showRole";
                }
                else {
                    alert("修改失败。");
                    location.href = "/Home/showRole";
                }
            }
        })
    }
    //删除角色
    function shanchu(RoleId)
    {
        alert(RoleId)
        $.ajax({
            url: "/Home/delRole",
            type: "post",
            data: { roleid: RoleId },
            success: function (obj) {
                if (obj > 0) {
                    location.href = "/Home/showRole";
                }
                else {
                    alert("删除失败。");
                    location.href = "/Home/showRole";
                }
            }
        })
    }
    //添加角色信息
    function tianjia()
    {

        $("#tbody").empty();
        var str = "";
        str += "<tr><td>角色名称：</td><td><input id=\"rolename\" type=\"text\"  /></td></tr>";
        $("#tbody").append(str);
    }
    function jueseadd()
    {
        var rolename = $("#rolename").val();
        $.ajax({
            url: "/Home/addRole",
            type: "post",
            data: { rolename: rolename },
            success: function (obj) {
                if (obj > 0) {
                    location.href = "/Home/showRole";
                }
                else {
                    alert("添加失败。");
                    location.href = "/Home/showRole";
                }
            }
        })
    }
</script>